//@import "xxx.less" //引入其他.less样式

//less注释方式，只针对.less
/*
    css注释方式、会同步到.css里面
*/
body{
    width: 50px;
    div{
        height: 60px;
    }
    .box5{
        align-self: start;
    }
    >.box4{
        width: 1px;
        &:hover{
            color: #bfa;
        }
    }
    &:hover{ //&也等价于this自己
        background-color: #bfa;
    }
    div &:hover{
        background-color: #bfa;
    }
}

//变量,再变量中可以存储一个任意值
//并且我们可以在需要时,任意的修改变量中的值
//变量的语法: @变量名:变量值
//变量相同时优先使用最近变量
@a:200px;       //定义像素
@b:#bfa;    //定义颜色
.box1{
    //如果变量：如果是直接使用则以 @变量名 的形式使用即可
    width: @a;
    color: @b;
}

//作为类名,或这一部分值使用时必须以 @{变量名} 的形式使用
@c:box2;        //定义变量名
.@{c}{
    width: @a;
    height: $width; //高度参照宽度的来设置
    background-image: url("@{c}/1.png"); //必须加上双引号
}

//--------------------继承p2继承p1属性---------------------
.p1{
    width: 250px;
    height: 250px;
}
.p2{opacity: 1;}

.p3:extend(.p1,.p2){    //继承p1和p2的属性同时再扩展自己本身属性,生成的css按分组选择器来生成
//.p2:extend(body .box5){ //继承嵌套里面的属性
//.p3{ .p1(); //样式分开生成了、直接引用p1的方式直接引用不建议、推荐还是使用extend,这个方式通常叫mixin方式, 使用方式下面p4介绍
    color: yellow;
}

.p4(@a:0px,@b:0px,@bg-color:#bfa){ //mixin方式, 也可叫做函数式(抽象)方式、它不会直接生成到css里面需要其他地方引用才可以
    //@变量名:参数默认值
    width: @a;
    height: @b;
    color: @bg-color
}

.p5{
    .p4(200px, 100px); //引用mixin函数式样式
    background-color: black;
}
